import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import process from 'process'
import postCssPxToRem from 'postcss-pxtorem'
import autoprefixer from 'autoprefixer'
import ElementPlus from 'unplugin-element-plus/vite'

export default ({ mode }) => {
  // 参数mode为开发模式或生产模式
  const env = loadEnv(mode, process.cwd())  // 获取.env文件里定义的环境变量
  const { VITE_APP_ENV, VITE_BASE_URL } = env
  return defineConfig({
    plugins: [vue(),
    ElementPlus({
      useSource: true,
    })
    ],
    // 跨域代理
    server: {
      // host: 'localhost',
      // port: 8084, // 端口，默认端口是5173
      proxy: {
        '/api': { // 请求接口中要替换的标识
          target: 'http://mall-pre.springboot.cn', // 代理地址
          changeOrigin: true, // 是否允许跨域
          secure: true,
          rewrite: (path) => path.replace(/^\/api/, '') // api标志替换为''
        }
      }
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    // 项目打包配置
    base: VITE_BASE_URL,
    css: {
      postcss: {
        plugins: [
          postCssPxToRem({ // 自适应，px>rem转换
            rootValue: 16, // 1rem的大小
            propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          }),
          autoprefixer({ // 自动添加前缀
            overrideBrowserslist: [
              "Android 4.1",
              "iOS 7.1",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8"
              //'last 2 versions', // 所有主流浏览器最近2个版本
            ],
            grid: true
          })
        ]
      }
    },
    build: {
      outDir: 'dist',
      assetsDir: 'assets',
      sourcemap: false,
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true,
        },
      },
    },
  })
}
